.tagsinput
  background: #fff
  border: 2px solid $firm
  border-radius: 6px
  height: 100px
  padding: 6px 1px 1px 6px
  overflow-y: auto
  text-align: left

  .tag
    border-radius: 4px
    background: $firm
    color: $inverse
    cursor: pointer
    margin-right: 5px
    margin-bottom: 5px
    overflow: hidden
    padding: 6px 13px 6px 19px
    position: relative
    vertical-align: middle
    +inline-block
    +transition(.14s linear)
    &:hover
      background-color: scale-color($firm, $lightness: -15%)
      padding-left: 12px
      padding-right: 20px

      .tagsinput-remove-link
        color: $inverse
        opacity: 1
        // Opacity fallback for IE
        display: block\9

  input
    background: transparent
    border: none
    color: $base
    font-family: $base-font-family
    font-size: $base-font-size
    margin: 0px
    padding: 0 0 0 5px
    outline: 0
    margin-right: 5px
    margin-bottom: 5px
    width: 12px

.tagsinput-remove-link
  bottom: 0
  color: $inverse
  cursor: pointer
  font-size: 12px
  opacity: 0
  padding: 9px 7px 3px 0
  position: absolute
  right: 0
  text-align: right
  text-decoration: none
  top: 0
  width: 100%
  z-index: 2
  // Opacity fallback for IE
  display: none\9

  &:before
    color: $inverse

.tagsinput-add-container
  vertical-align: middle
  +inline-block

.tagsinput-add
  background-color: scale-color(desaturate($base, 15%), $lightness: 67%)
  border-radius: 3px
  color: $inverse
  cursor: pointer
  margin-bottom: 5px
  padding: 6px 9px
  +inline-block
  +transition(.25s)
  &:hover
    background-color: $firm

.tags_clear
  clear: both
  width: 100%
  height: 0px

.not_valid
  background: #FBD8DB !important
  color: #90111A !important

